/**
 * @parma author ludan
 * @param explain 录入信息表单页
 */
import React, { useState } from 'react';
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space, Tag, message } from 'antd';
import type { CustomTagProps } from 'rc-select/lib/BaseSelect';
import moment from 'moment';

const tagRender = (props: CustomTagProps) => {
  const { label, value, closable, onClose } = props;
  const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
    event.preventDefault();
    event.stopPropagation();
  };
  const colorArr = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
  const idx = Math.floor(Math.random() * 4 + 1)
  return (
    <Tag
      color={colorArr[idx]}
      onMouseDown={onPreventMouseDown}
      closable={closable}
      onClose={onClose}
      style={{ marginRight: 3 }}
    >
      {label}
    </Tag>
  );
};

const options = [
  { value: 'react' },
  { value: 'Vue' },
  { value: 'Redux' },
  { value: 'mobx' }
];

export interface NetworkDrawerType {
  open: boolean;
  title: string;
  selectItem: object;
  onClose: () => void
}
const { Option } = Select;
const NetworkDrawer: React.FC<NetworkDrawerType> = ({ title, open, onClose, selectItem }) => {
  const [form] = Form.useForm();
  const [formItem, setFormItem] = useState(null);
  // 提交
  const onSubmit = (): void => {
    form.validateFields()
      .then((values) => {
        const time = moment(values.updateTime).format("YYYY-MM-DD");
        setFormItem({ ...values, updateTime: time })
        /** 正确后的验证信息 */
        console.log(values, '1111');
        onClose();
        setTimeout(() => {
          message.success("保存成功")
        }, 1000)
      })
      .catch((errorInfo) => {
        /** 错误信息 */
        console.log(errorInfo);
        message.error(errorInfo)
      });
  };

  return (
    <>
      <Drawer
        title={title}
        width={720}
        onClose={onClose}
        visible={open}
        bodyStyle={{ paddingBottom: 80 }}
        extra={
          <Space>
            <Button onClick={onClose}>取消</Button>
            <Button onClick={() => onSubmit()} type="primary">提交</Button>
          </Space>
        }
      >
        <Form
          layout="vertical"
          initialValues={{ name: "学习", ...selectItem }}
          autoComplete="off"
          form={form}
        >
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="name"
                label="网盘课程名称"
                rules={[{ required: true, message: '请输入网盘课程名称' }]}
              >
                <Input placeholder="请输入网盘课程名称" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="url"
                label="网盘地址"
              // rules={[{ required: true, message: '请输入网盘课程地址' }]}
              >
                <Input
                  style={{ width: '100%' }}
                  addonBefore="http://"
                  addonAfter=".com"
                  placeholder="请输入网盘课程地址"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="isComplete"
                label="更新是否完成"
                rules={[{ required: true, message: '请选择视频更新是否完成' }]}
              >
                <Select placeholder="请选择视频更新是否完成">
                  <Option value="0">正在更新</Option>
                  <Option value="1">更新完成</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="skillTag"
                label="技能标签"
                rules={[{ required: true, message: '请选择相关技能标签' }]}
              // initialValue={['react', 'mobx']}
              >
                <Select
                  mode="multiple"
                  showArrow
                  tagRender={tagRender}
                  style={{ width: '100%' }}
                  options={options}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="watchProgress"
                label="观看情况"
                rules={[{ required: true, message: '请选择观看情况' }]}
              >
                <Select placeholder="请选择观看情况">
                  <Option value="0">未观看</Option>
                  <Option value="1">观看中</Option>
                  <Option value="2">已观看</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="updateTime"
                label="课程更新时间"
                rules={[{ required: true, message: '请选择课程更新时间' }]}
              >
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="introduce"
                label="课程介绍"
                rules={[{ required: true, message: '请输入该课程内容' }]}
              >
                <Input.TextArea rows={4} placeholder="请输入该课程内容" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
};

export default NetworkDrawer